import {getCurrentInstance, reactive, ref} from "vue";
import {addDeptForm, delDeptById, getDeptById, updateDept, updateDeptForm} from "@/api/system/dept";
import MessageBox from "element-plus/es/el-message-box";
import useTable, {Dept} from "@/views/system/dept/hooks/useTable";
import {ElMessage} from "element-plus";
import useButtonDisabled from "@/hooks/useButtonDisabled/useButtonDisabled";
export interface DeptForm{
    id?: number;
    parentId?: number;
    name: string;
    sort: number;
    dataStatus: number;
}
function useForm() {
    const {btnDisabled,clearBtnDisabled} = useButtonDisabled()
    const {getDataList} = useTable()
   const instance = getCurrentInstance()
    const visible = ref<boolean>(false)
    const isEdit = ref<boolean>(false)
    const deptForm = reactive<DeptForm>({
        parentId:undefined,
        name:"",
        sort:0,
        dataStatus: 1
    })
    const rules = reactive({
        name:[
            {required:true,message:'请输入部门名称',trigger:"blur"},
            {min:0,max:50,message: "部门名称不能超过50个字符",trigger: "blur"}
        ]
    })
    function addDept(parentId?: number){
        deptForm.parentId = parentId
        isEdit.value =false
        visible.value = true
    }
    function editDept(id: number) {
        getDeptById(id).then(res=>{
            const dept  = (res.data as DeptForm)
            isEdit.value = true
             deptForm.parentId = dept.parentId
            deptForm.name = dept.name
            deptForm.sort = dept.sort
            deptForm.dataStatus = dept.dataStatus
            deptForm.id = dept.id
            visible.value = true
        })
    }
    function dialogClose() {
        isEdit.value = false
        deptForm.dataStatus = 1;
        deptForm.sort = 0;
        deptForm.name = "";
        deptForm.parentId = undefined
    }
    function delDept(row: Dept) {
        MessageBox.confirm(`确定要删除(${row.name})吗？`,"提示",{
            type:"warning",
            confirmButtonText:"确定",
            cancelButtonText:"取消"
        }).then(()=>{
            delDeptById(row.id).then(()=>{
                getDataList()
                ElMessage.success("删除成功")
            })
        }).catch(()=>{
            console.log("取消删除")
        })
    }
    function submitDeptForm(e: MouseEvent) {
       // eslint-disable-next-line
        (instance?.refs.deptFormRef as any).validate((valid: boolean)=>{
            if(!valid){
                ElMessage.error("有必填项未填")
                return
            }
            btnDisabled(e);
            if(!isEdit.value){
                addDeptForm(deptForm).then(res=>{
                    getDataList()
                    console.log(res)
                    visible.value = false
                    ElMessage.success("添加成功")
                    clearBtnDisabled(e)
                })
            }else {
                updateDept((deptForm as updateDeptForm)).then(()=>{
                    getDataList()
                    visible.value = false
                    ElMessage.success("修改成功")
                    clearBtnDisabled(e)
                })
            }
        })
    }
    return {
        isEdit,
        visible,
        deptForm,
        addDept,
        editDept,
        delDept,
        dialogClose,
        rules,
        submitDeptForm
    }
}
export default useForm
